<template>
  <view class="download">
    <view class="bj">
      <view class="download_bj">
        <image src="../../static/download/bj.png" mode=""></image>
        <image src="../../static/download/bj.png" mode=""></image>
      </view>
      <view class="download_bj1">
        <image src="../../static/download/bj.png" mode=""></image>
        <image src="../../static/download/bj.png" mode=""></image>
        <image src="../../static/download/bj.png" mode=""></image>
      </view>
      <view class="download_bj1">
        <image src="../../static/download/bj.png" mode=""></image>
        <image src="../../static/download/bj.png" mode=""></image>
        <image src="../../static/download/bj.png" mode=""></image>
      </view>
      <view class="download_bj">
        <image src="../../static/download/bj.png" mode=""></image>
        <image src="../../static/download/bj.png" mode=""></image>
      </view>
    </view>
    <view class="mask">
      <image
        class="title"
        src="../../static/download/title.png"
        mode=""></image>
      <view>
        <image
          style="
            position: relative;
            top: 53px;
            width: 162px;
            height: 266px;
            z-index: 1;
          "
          src="../../static/download/miaomiao.png"
          mode=""></image>
        <view
          style="
            display: flex;
            justify-content: space-between;
            padding: 80px 17px;
            position: relative;
            top: -270px;
          ">
          <view class="card">
            <view class="title1">成熟知性</view>
            <view class="card_content">
              <view class="subheading">
                <image
                  src="../../static/download/subheading.png"
                  mode=""></image>
              </view>
              <image
                style="width: 100%; height: 147.63px"
                src="../../static/download/miaomiao2.png"
                mode=""></image>
              <view class="similarity">相似度90%</view>
            </view>
            <view class="card_footer">
              <view class="topitem">
                小燕
                <image src="../../static/download/vip.png" mode=""></image>
                <view>
                  <image src="../../static/download/huo.png" mode=""></image>
                  好评如潮
                </view>
              </view>
              <view class="bottomitem">
                深圳市
                <view>2.5km</view>
                18岁
              </view>
            </view>
          </view>
          <image
            style="width: 128px; height: 210px"
            src="../../static/download/miaomiao1.png"
            mode=""></image>
        </view>
      </view>
      <view class="logo">
        <image
          src="../../static/download/logo.png"
          mode=""
          style="width: 54px; height: 54px"></image>
        <view class="appName">缘定缘分</view>
        <view class="yaoqingcode" v-if="parent_user_id">
          邀请码：{{ parent_user_id }}
        </view>
      </view>

      <view class="but" @click="showPopup">
        {{ parent_user_id ? "立即下载" : "立即下载" }}
      </view>
    </view>

    <!-- 下载弹框 -->
    <view class="popup-overlay" v-if="showDownloadPopup" @click="closePopup">
      <view class="popup-container" @click.stop>
        <!-- 关闭按钮 -->
        <view class="close-btn" @click="closePopup">
          <text>×</text>
        </view>

        <!-- 弹框内容 -->
        <view class="popup-content">
          <view class="popup-title">填写资料下载APP</view>
          <!-- 
          <view class="invite-code" v-if="parent_user_id">
            <text class="invite-label">邀请码：</text>
            <text class="invite-value">{{ parent_user_id }}</text>
          </view> -->

          <view class="phone-input-container">
            <view class="country-code">+86</view>
            <input
              class="phone-input"
              type="number"
              placeholder="请输入手机号"
              v-model="phoneNumber"
              maxlength="11" />
          </view>

          <view class="confirm-btn" @click="confirmDownload">确认</view>
        </view>
      </view>
    </view>
    <view class="downloadshare" v-if="isdownloadShare">
      <view
        style="
          display: flex;
          font-size: 17px;
          color: #ffffff;
          align-items: flex-end;
        ">
        <view style="display: flex; align-items: end">
          1、点击右上角
          <image
            src="../../static/downloadshare/slh.png"
            mode="widthFix"
            style="width: 25px; margin: 10px 9px"></image>
        </view>
        <image
          src="../../static/downloadshare/line.png"
          mode="widthFix"
          style="width: 151px; margin-left: 20px; margin-bottom: 10px"></image>
      </view>
      <view style="font-size: 17px; color: #ffffff; margin-top: 15px">
        2、选择在默认浏览器中打开
      </view>
      <image
        src="../../static/downloadshare/icongroud.png"
        mode="widthFix"
        style="width: 100%; margin-top: 52px"></image>
    </view>
  </view>
</template>

<script>
import user from "@/api/user.js";
import { HTTP_REQUEST_URL } from "@/config/app";
export default {
  data() {
    return {
      parent_user_id: 0,
      deviceId: "",
      isdownloadShare: false,
      showDownloadPopup: false,
      phoneNumber: "",
    };
  },
  onLoad(options) {
    this.parent_user_id = options.parent_user_id;
    uni.setStorageSync("parent_user_id", this.parent_user_id);
  },
  methods: {
    // 显示下载弹框
    showPopup() {
      let browser = window.navigator.userAgent.toLowerCase();
      // 匹配en中是否含有MicroMessenger字符串
      if (browser.match(/MicroMessenger/i) != "micromessenger") {
        if (uni.getStorageSync("newPhone")) {
          this.phoneNumber = uni.getStorageSync("newPhone");
          this.toApp();
        } else {
          this.showDownloadPopup = true;
        }
      } else {
        this.isdownloadShare = true;
      }
    },

    // 关闭弹框
    closePopup() {
      this.showDownloadPopup = false;
    },

    // 确认下载
    confirmDownload() {
      if (!this.phoneNumber) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }

      if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return;
      }

      this.toApp();
    },

    // 跳转下载页面
    toApp() {
      uni.setStorageSync("newPhone", this.phoneNumber);
      console.log(this.parent_user_id, "this.parent_user_id");
      this.$Api.common
        .setPhoneCode({
          mobile: this.phoneNumber,
          parent_user_id: this.parent_user_id,
        })
        .then((res) => {
          this.showDownloadPopup = false;
          // let browser = window.navigator.userAgent.toLowerCase();
          // 匹配en中是否含有MicroMessenger字符串
          // if (browser.match(/MicroMessenger/i) != "micromessenger") {

          window.location.href = "https://oss.bigchun.com/apk/缘分.apk";
          // } else {
          //   this.isdownloadShare = true;
          // uni.navigateTo({
          // 	url: '/pages/downloadshare/downloadshare'
          // })
          // }
        });

      // if (this.parent_user_id != undefined) {
      //   uni.setStorageSync("parent_user_id", this.parent_user_id);
      //   uni.navigateTo({
      //     url: "/pages/login/login",
      //   });
      // } else {
      //   let browser = window.navigator.userAgent.toLowerCase();
      //   // 匹配en中是否含有MicroMessenger字符串
      //   if (browser.match(/MicroMessenger/i) != "micromessenger") {
      //     window.location.href = "https://oss.bigchun.com/apk/ydyf.apk";
      //   } else {
      //     this.isdownloadShare = true;
      //     // uni.navigateTo({
      //     // 	url: '/pages/downloadshare/downloadshare'
      //     // })
      //   }
      // }
    },
  },
};
</script>

<style lang="less" scoped>
.download {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .mask {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    z-index: 1;
    text-align: center;

    .title {
      margin: 44px auto 0;
      width: 90%;
      height: 70px;
    }

    .card {
      width: 128px;
      height: 210px;
      background: #ffffff;
      border-radius: 8px;
      padding: 6px;
      box-sizing: border-box;

      .title1 {
        font-weight: 500;
        font-size: 9px;
        color: #323334;
        line-height: 13px;
        text-align: center;
        font-style: normal;
      }

      &_content {
        width: 100%;
        height: 100%;

        .subheading {
          background: rgba(241, 105, 246, 1);
          border-radius: 2px;
          padding: 0;
          width: 22px;
          height: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          top: 5px;
          z-index: 1;

          & > image {
            width: 28px;
            height: 10px;
          }
        }

        .similarity {
          background: rgba(241, 105, 246, 0.3);
          border-radius: 0px 0px 6px 6px;
          font-weight: 400;
          font-size: 7px;
          color: #ffffff;
          line-height: 10px;
          text-align: center;
          font-style: normal;
          position: relative;
          top: -16px;
        }
      }

      &_footer {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 6px;
        position: relative;
        top: -38px;
        box-sizing: border-box;

        .topitem {
          font-weight: 500;
          font-size: 9px;
          color: #323334;
          line-height: 12px;
          text-align: center;
          font-style: normal;
          display: flex;
          align-items: center;

          & > image {
            width: 30px;
            height: 9px;
            margin: 0 4px;
          }

          & > view {
            background: rgba(255, 205, 196, 0.9);
            border-radius: 2px;
            padding: 1px 2px;
            font-weight: 400;
            font-size: 6px;
            color: #fb2525;
            line-height: 10px;
            text-align: center;
            font-style: normal;
            display: flex;
            align-items: center;
            box-sizing: border-box;

            & > image {
              width: 8px;
              height: 8px;
            }
          }
        }

        .bottomitem {
          margin-top: 3px;
          font-weight: 400;
          font-size: 8px;
          color: #606060;
          line-height: 8px;
          text-align: left;
          font-style: normal;
          display: flex;
          width: 100%;
          height: 8px;

          & > view {
            margin: 0 3px;
            padding: 0 3px;
            border-left: 1px solid rgba(96, 96, 96, 1);
            border-right: 1px solid rgba(96, 96, 96, 1);
            box-sizing: border-box;
          }
        }
      }
    }

    .appName {
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      line-height: 21px;
      text-align: center;
      font-style: normal;
    }

    .logo {
      position: absolute;
      left: 50%;
      bottom: 170px;
      transform: translate(-50%, 0%);
    }

    .but {
      width: 241px;
      height: 44px;
      background: linear-gradient(135deg, #fe93bf 0%, #a27aff 100%);
      box-shadow: 0px 2px 5px 0px rgba(241, 105, 246, 0.3);
      border-radius: 22px;
      font-weight: 500;
      font-size: 15px;
      color: #ffffff;
      line-height: 44px;
      text-align: center;
      font-style: normal;
      position: absolute;
      left: 50%;
      bottom: 90px;
      transform: translate(-50%, 0%);
    }
  }

  .bj {
    .download_bj,
    .download_bj1 {
      display: flex;
    }

    .download_bj1 {
      height: 155px;

      & > image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .downloadshare {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.8);
    padding: 17px 30px;
    box-sizing: border-box;
    position: fixed;
    z-index: 9999;
    top: 0;
  }
}
.yaoqingcode {
  padding: 6px 15px;
  border-radius: 30px;
  background: #ffffff;
  color: #a27aff;
  margin-top: 5px;
}

/* 下载弹框样式 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.popup-container {
  position: relative;
  width: 320px;
  background: linear-gradient(180deg, #f8e6ff 0%, #ffffff 100%);
  border-radius: 20px;
  padding: 40px 30px 30px;
  box-sizing: border-box;
  margin: 0 20px;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.popup-content {
  text-align: center;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.invite-code {
  background: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  text-align: left;
}

.invite-label {
  font-size: 14px;
  color: #666;
}

.invite-value {
  font-size: 16px;
  font-weight: bold;
  color: #e066ea;
  margin-left: 10px;
}

.phone-input-container {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 25px;
  padding: 0 20px;
  margin-bottom: 30px;
  height: 50px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.country-code {
  font-size: 16px;
  color: #666;
  margin-right: 15px;
  border-right: 1px solid #e0e0e0;
  padding-right: 15px;
}

.phone-input {
  flex: 1;
  font-size: 16px;
  color: #333;
  border: none;
  outline: none;
  background: transparent;
}

.phone-input::placeholder {
  color: #ccc;
}

.confirm-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #fe93bf 0%, #a27aff 100%);
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(241, 105, 246, 0.3);
}
</style>
